import React, { useState, useEffect } from 'react'; // 导入 React 库以及 useState 和 useEffect 钩子

// 组件引入
import MenuTable from './MenuTable'; // 导入 MenuTable 组件

// 数据引入-导入菜单数据
import DefaultMenuData from '../../mock/data/MenuData';

function MenuPage() {
    // 从 localStorage 初始化菜单数据
    const [menuData, setMenuData] = useState(() => {
        const storedMenuData = localStorage.getItem('menuData');
        return storedMenuData ? JSON.parse(storedMenuData) : DefaultMenuData;
    });

    // 监控 menuData 的变化，并同步到 localStorage
    useEffect(() => {
        localStorage.setItem('menuData', JSON.stringify(menuData));
    }, [menuData]);

    // 监听 localStorage 的变化，更新菜单数据
    useEffect(() => {
        const handleStorageChange = (event) => {
            if (event.key === 'menuData') {
                console.log('change');
                const updatedMenuData = JSON.parse(event.newValue);
                setMenuData(updatedMenuData);
            }
        };

        window.addEventListener('storage', handleStorageChange); // 添加 storage 事件监听

        return () => {
            window.removeEventListener('storage', handleStorageChange); // 组件卸载时移除监听
        };
    }, []);

    // 返回菜单页面的 JSX
    return (
        <div className="container">
            {/* 菜单表格，传递菜单数据和更新函数 */}
            <MenuTable menuData={menuData} setMenuData={setMenuData} />
        </div>
    );
}

// 导出 MenuPage 组件
export default MenuPage;
